<template>
  <el-card shadow="never" class="aui-card--fill">
    <el-row :gutter="20">
      <el-col :span="12">
        <h1>投诉统计</h1>
        <div class="complainTotalDiv1">
          <div class="complainTotalDivData1">已处理投诉数: {{ processed }}</div>
        </div>
        <div class="complainTotalDiv2">
          <div class="complainTotalDivData2">未处理投诉数: {{ notProcessed }}</div>
        </div>
      </el-col>
      <el-col :span="12">
        <h1>各区投诉统计</h1>
        <div>
          <ve-histogram :data="complaintDistribution"></ve-histogram>
        </div>
      </el-col>
    </el-row>
    <br>
    <div class="mod-eightapp__eicomplaininfo}">
      <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
        <el-form-item>
          <el-input v-model="dataForm.id" placeholder="请输入投诉编号查询" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-search" @click="getDataList()"></el-button>
        </el-form-item>
        <el-form-item>
          <el-button v-if="$hasPermission('eightapp:eicomplaininfo:save')" type="primary" @click="addOrUpdateHandle()"
                     icon="el-icon-plus"></el-button>
        </el-form-item>
        <el-form-item>
          <el-button v-if="$hasPermission('eightapp:eicomplaininfo:delete')" type="danger" @click="deleteHandle()"
                     icon="el-icon-delete"></el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="success" @click="exportHandle()">{{ '导出数据为Excel文件' }}</el-button>
        </el-form-item>
      </el-form>
      <el-table v-loading="dataListLoading" :data="dataList" border @selection-change="dataListSelectionChangeHandle"
                style="width: 100%;">
        <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
        <el-table-column prop="id" label="投诉编号" header-align="center" align="center"></el-table-column>
        <el-table-column prop="ownerId" label="业主编号" header-align="center" align="center"></el-table-column>
        <el-table-column prop="managerId" label="物业管理员编号" header-align="center" align="center"></el-table-column>
        <el-table-column prop="content" label="投诉内容" header-align="center" align="center"></el-table-column>
        <el-table-column prop="chargeinfoTime" label="投诉时间" header-align="center" align="center"></el-table-column>
        <el-table-column prop="state" label="处理状态" header-align="center" align="center"
                         :formatter="stateFormatter"></el-table-column>
        <el-table-column prop="memo" label="备注" header-align="center" align="center"></el-table-column>
        <el-table-column prop="creator" label="建表人" header-align="center" align="center"></el-table-column>
        <el-table-column prop="createTime" label="建表时间" header-align="center" align="center"></el-table-column>
        <el-table-column prop="updator" label="更新人" header-align="center" align="center"></el-table-column>
        <el-table-column prop="updateTime" label="更新时间" header-align="center" align="center"></el-table-column>
        <el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="200">
          <template slot-scope="scope">
            <el-button v-if="$hasPermission('eightapp:eicomplaininfo:update')" type="primary" icon="el-icon-edit" circle
                       @click="addOrUpdateHandle(scope.row.id)"></el-button>
            <el-button v-if="$hasPermission('eightapp:eicomplaininfo:delete')" type="danger" icon="el-icon-delete" circle
                       @click="deleteHandle(scope.row.id)"></el-button>
            <el-button v-show="scope.row.state == 0" type="warning" icon="el-icon-finished" circle
                       @click="updateStateById(scope.row.id)">
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          :current-page="page"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="limit"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="pageSizeChangeHandle"
          @current-change="pageCurrentChangeHandle">
      </el-pagination>
      <!-- 弹窗, 新增 / 修改 -->
      <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
    </div>
  </el-card>
</template>

<script>
import mixinViewModule from '@/mixins/view-module'
import AddOrUpdate from './eicomplaininfo-add-or-update'

export default {
  mixins: [mixinViewModule],
  data() {
    return {
      mixinViewModuleOptions: {
        getDataListURL: '/eightapp/eicomplaininfo/page',
        getDataListIsPage: true,
        exportURL: '/eightapp/eicomplaininfo/export',
        deleteURL: '/eightapp/eicomplaininfo',
        deleteIsBatch: true
      },
      dataForm: {
        id: ''
      },
      managerList: [],
      allDataList: [],
      complaintDistribution: {
        columns: ['小区', '投诉总数'],
        rows: [
          {'小区': '一区', '投诉总数': 0},
          {'小区': '二区', '投诉总数': 0},
          {'小区': '三区', '投诉总数': 0},
          {'小区': '四区', '投诉总数': 0},
        ]
      },
      processed: 0,
      notProcessed: 0,
      X: 0
    }
  },
  components: {
    AddOrUpdate
  },
  created() {
    this.getComplainInfoAllDataList();
    this.X = 1;
  },
  methods: {
    stateFormatter(row) {
      var state = row.state
      if (state == 0) {
        return '未处理'
      } else if (state == 1) {
        return '已处理'
      }
    },
    managerFormatter(row) {
      var n = row.managerId

      for (var i = 0; i < this.managerList.length; i++) {
        if (n == this.managerList.get(i).id) {
          return this.managerList.get(i).name
        }
      }
    },
    updateStateById(id) {
      this.$confirm('是否处理投诉', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
          .then(() => {
            this.$http.put(`eightapp/eicomplaininfo/` + id)
                .then(({data: res}) => {
                  this.query()
                  this.getComplainInfoAllDataList()
                  this.$message({
                    type: 'success',
                    message: '处理成功!'
                  });
                })
                .catch(() => {
                  this.$message({
                    type: 'danger',
                    message: '处理失败!'
                  })
                })
          });
    },
    getComplainInfoAllDataList() {
      this.$http.get('eightapp/eicomplaininfo/getComplainList')
          .then(({data: res}) => {
            this.allDataList = res.data;
            this.getProcessedAndNotProcessed();
            this.getComplaintDistribution();
          })
    },
    getProcessedAndNotProcessed() {
      let countP = 0;
      let countN = 0;
      for (let i = 0; i < this.allDataList.length; i++) {
        if (this.allDataList.at(i).state == 1) {
          countP++;
        } else if (this.allDataList.at(i).state == 0) {
          countN++;
        }
      }
      this.processed = countP;
      this.notProcessed = countN;
    },
    getComplaintDistribution() {
      let countV1 = 0;
      let countV2 = 0;
      let countV3 = 0;
      let countV4 = 0;
      for (let i = 0; i < this.allDataList.length; i++) {
        if (this.allDataList.at(i).eiOwnerInfoEntity.villageId == 1) {
          countV1++;
        } else if (this.allDataList.at(i).eiOwnerInfoEntity.villageId == 2) {
          countV2++;
        } else if (this.allDataList.at(i).eiOwnerInfoEntity.villageId == 3) {
          countV3++;
        } else if (this.allDataList.at(i).eiOwnerInfoEntity.villageId == 4) {
          countV4++;
        }
      }
      this.complaintDistribution.rows[0]['投诉总数'] = countV1;
      this.complaintDistribution.rows[1]['投诉总数'] = countV2;
      this.complaintDistribution.rows[2]['投诉总数'] = countV3;
      this.complaintDistribution.rows[3]['投诉总数'] = countV4;
    }
  }
}
</script>

<style>
.complainTotalDiv1 {
  width: 450px;
  height: 150px;
  background-color: #19d2ad;
  margin-left: 50px;
  margin-top: 30px;
  border-radius: 10px;
  text-align: center;
  position: relative;
}

.complainTotalDiv2 {
  width: 450px;
  height: 150px;
  background-color: #f66041;
  margin-left: 50px;
  margin-top: 30px;
  border-radius: 10px;
  text-align: center;
  position: relative;
}

.complainTotalDivData1 {
  color: #ffffff;
  font-size: 35px;
  position: absolute;
  top: 35%;
  left: 15%;
}

.complainTotalDivData2 {
  color: #ffffff;
  font-size: 35px;
  position: absolute;
  top: 35%;
  left: 15%;
}
</style>
